<template>
<router-link to="/shop" class="flex">
  <div class="userinfocard">
   <div id="infoCard">
     <div id="top">
       <router-link to="/exercise" class="flex">
        <span id="inform" to="/inform" class="iconfont">&#xe643;</span>
       </router-link>
       <router-link to="/exercise" class="flex">
       <span id="seting" to="/seting"  class="iconfont">&#xe640;</span>
       </router-link>
     </div>
     <div id="infomine">
       <div id="via"><img :src="viaimg"></div>
       <p id="nickName">{{nickName}}</p>
       <p id="userId">账号ID：{{userId}}</p>
       <span id="userDetails" to="/seting"  class="iconfont">&#xe622;</span>
     </div>
   </div>
  </div>
</router-link>
</template>
<script>
// import imgs from "../assets/MineALL/vialogo.jpg";
export default {
    data() {
      return {
        viaimg:require("../assets/MineALL/vialogo.jpg"),
        nickName: "成成",
        userId: "12345678"
      }
      },
      methods: {

      },
}
</script>
<style lang="less">
//infoCard样式

 #infoCard{
    width: 100%;
    #top{
      width: 100%;
      height: 1rem;
      #seting{
        font-size: 0.6rem;
        line-height: 1rem;
        float:right;
        color: white;
        padding-left: .5rem;
        padding-right: .5rem;
      }
      #inform{
        font-size: 0.6rem;
        line-height: 1rem;
        float:right;
        color: white;
        padding-right: .5rem;
      }
    }
    #infomine{
      height: 4rem;
      position: relative;
      #via{
        position: absolute;
        border: 1px solid white;
        width: 2rem;
        height: 2rem;
        border-radius: 1rem;
        margin-top:.2rem;
        margin-left:.6rem ;
        overflow: hidden;
        img{
          width:100%;
          height:auto;
        }
      }
      #nickName{
          position: absolute;
          font-size: .8rem;
          font-weight: lighter;
          color: white;
          margin-top:.6rem ;
          margin-left:2.7rem ;
      }
      #userId{
        position: absolute;
        font-size: .4rem;
        font-weight: lighter;
        color: white;
        margin-top: 1.6rem ;
        margin-left:2.7rem ;
      }
      #userDetails{
        
        float: right;
        font-weight: lighter;
        font-size: .6rem;
        color: white;
        margin-top: 1.6rem ;
        margin-right:.3125rem ;
        
      }
    }
 }

</style>